<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <title>推送模型</title>
  <link rel="stylesheet" type="text/css" href="${ctxPath}/static/sui/semantic.amazon.min.css">
  <script src="${ctxPath}/static/sui/jquery-3.1.1.min.js"></script>
  <script src="${ctxPath}/static/sui/semantic.min.js"></script>
</head>

<body style="min-width:auto;padding:15px">
<div class="ui center">
  <form class="ui form">
    <input type="hidden" id="id" value="${id}">
    <input type="hidden" id="thumb" value="${thumb}">
    <div class="field">
      <label>缩略图预览</label>
      <img style="margin: 0 auto;" class="ui medium rounded image" src="${thumb}">
    </div>
    <div class="field">
      <label>模型名称</label>
      <input type="text" name="modelname" id="modelname">
    </div>
    <div class="field">
      <label>模型分类</label>
      <div class="ui right labeled input">
        <input type="hidden" id="category">
        <input type="text" readonly id="category_text">
        <div id="category_dropdown" class="ui pointing right dropdown label">
          <div class="text">选择分类</div>
          <i class="dropdown icon"></i>
          <div class="menu">
            @for(cat in parentCat){
            <div class="item">
              <i class="dropdown icon"></i>
              <span class="text">${cat.name}</span>
              <div class="menu">
                @for(ccat in childCat){
                @if(ccat.pid == cat.id){
                <div class="item" data-value="${ccat.id}">${ccat.name}</div>
                @}
                @}
              </div>
            </div>
            @}
          </div>
        </div>
      </div>
    </div>

    <div class="field">
      <label>模型风格</label>
      <select id="style" class="ui fluid normal dropdown">
        @for(s in styles){
        <option value="${s.num}">${s.name}</option>
        @}
      </select>
    </div>
    <h4>材质选项</h4>
    <div class="inline field">
      <input type="hidden" id="vray" value="0">
      <input type="hidden" id="enscape" value="0">
      <input type="hidden" id="thea" value="0">
      <div class="ui toggle checkbox">
        <input data-value="vray" type="checkbox" class="hidden">
        <label>Vray Ready</label>
      </div>
      <div class="ui toggle checkbox">
        <input data-value="enscape" type="checkbox" class="hidden">
        <label>Enscape Ready</label>
      </div>
      <div class="ui toggle checkbox">
        <input data-value="thea" type="checkbox" class="hidden">
        <label>Thea Ready</label>
      </div>
    </div>

    <div class="ui  buttons">
      <button type="button" id="upload_btn" class="ui button primary">推送模型</button>
      <div class="or"></div>
      <button type="button" id="close_btn" class="ui button secondary">取消退出</button>
    </div>
    <div id="msg" style="display: none;" class="ui orange message">模型正在上传,请不要进行任何其他操作.等待完毕</div>


  </form>
  <div id="successDlg" class="ui modal mini">
    <div class="header">提示</div>
    <div class="content">
      <p>已经推送到服务器后台下载.</p>
    </div>
    <div class="actions">
      <div class="ui approve button">确定</div>
    </div>
  </div>
</div>
</body>
<script type="text/javascript">
  $(function () {
    $('#modelname').val('${title}');
    $('#category_dropdown').dropdown({
      action: 'select',
      onChange: function (value, text, $selectedItem) {
        $('#category_text').val($selectedItem.parent().prev().text() + '--' + text);
        $('#category').val(value);
      }
    });
    $('#style').dropdown();
    $('.checkbox').checkbox({
      onChange: function () {
        $('#' + $(this).data('value')).val($(this).parent().checkbox('is checked') ? 1 : 0);
      }
    });
    $('#close_btn').click(function () {
      window.close();
    });
    $('#upload_btn').click(function (e) {
      e.stopPropagation();
      if ($('#modelname').val().length === 0) {
        alert('必须有模型名称.');
        return false;
      }
      if ($('#category').val().length === 0) {
        alert('必须有模型分类.');
        return false;
      }
      $('#upload_btn').addClass("loading disabled");
      $('#close_btn').addClass("disabled");
      $('#msg').show();

      $.post('/sumodel/download_zm', {
        modelid: '${id}',
        session: '${sid}',
        thumbpath: '${thumb}',
        modelname: $('#modelname').val(),
        category: $('#category').val(),
        style: $('#style').val(),
        vray: $('#vray').val(),
        enscape: $('#enscape').val(),
        thea: $('#thea').val()
      }, function (data) {
        console.log(data);
        $('#successDlg').modal('setting',{
          onApprove:function () {
            window.close();
          }
        }).modal('show');
      });
    });
  });

  function retry() {
    $('#msg').hide();
    $('#upload_btn').removeClass("loading disabled");
    $('#close_btn').removeClass("disabled");
  }
</script>

</html>